import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import _ from 'lodash'
import moment from 'moment'
import { Table, Spin, Form, Row, Col, Input, Button, Card, Tabs } from 'antd'
import BarMap from './components/barMap'
import AreaMap from './components/areaMap'
import BarLineMap from './components/barLineMap'
import PieMap from './components/pieMap'
import HorizontalBarMap from './components/horizontalBarMap'
import FilterModule from './components/filterRegister'

const TabPane = Tabs.TabPane;

class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
      search: {
        dateBegin: moment(moment().year()+'-01-01').format('YYYY-MM-DD'),
        dateEnd: moment().format('YYYY-MM-DD'),
        projectCategoryIds: undefined,
        projectIds: undefined,
        areaIds: this.props.common.user?[this.props.common.user.user.areaId]:undefined,
        states: undefined
      }
    }
  }

  componentDidMount(){
  	
  }

  componentWillReceiveProps(nextProps){
    // console.log(this.props.common);
    if(nextProps.common.user&&nextProps.common.user.user&&!this.props.common.user){
      this.setState({
        search: Object.assign({}, this.state.search, {
          areaIds: [nextProps.common.user.user.areaId]
        })
      });
    }
  }

  fun = () => {
    
  }

  handleFilter = (option)=>{
    this.setState({
      search: Object.assign({}, this.state.search, option)
    });
  }
  
  render() {
    console.log(this.state);
    return (
    	<div className="visualization out-content">
        <div style={{marginBottom: 20}}>
          <FilterModule 
            handleFilter={ this.handleFilter }
          />
        </div>
      {/*
        <Tabs defaultActiveKey="1" onChange={()=>{}}>
          <TabPane tab="项目发放统计" key="1">
            
          </TabPane>
          <TabPane tab="受益人员统计" key="2">

          </TabPane>
        </Tabs>
      */}
        <Row gutter={30}>
          <Col span={12}>
            <Card title="金额统计">
              <BarMap 
                search={ this.state.search }
                url="/visualization/register/getMoneyStat"
                setClass="jetj"
                headTitle="日期"
                color={['#39C558',
                        '#ff3e43',
                        '#FFBE41',
                        '#00b4ff']}
              />
            </Card>
          </Col>
          <Col span={12}>
            <Card title="人次统计">
              <AreaMap 
                search={ this.state.search }
                url="/visualization/register/getPersonStat"
                setClass="rctj"
                headTitle="日期"
                color={['#937fc7',
                        '#ff3e43',
                        '#FFBE41',
                        '#00b4ff',
                        '#39C558']}
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={30}>
          <Col span={24}>
            <Card title="发放情况统计-按区划">
              <BarLineMap 
                search={ this.state.search }
                url="/visualization/register/getSubsidyGrantStatForArea"
                setClass="barLineMapArea"
                headTitle="区划名称"
                color={['#FFBE41',
                        '#ff3e43',
                        '#937fc7',
                        '#00b4ff',
                        '#39C558']}
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={30}>
        <Col span={24}>
            <Card title="发放情况统计-按项目">
              <BarLineMap 
                search={ this.state.search }
                url="/visualization/register/getSubsidyGrantStatForProject"
                setClass="barLineMapProject"
                headTitle="项目名称"
                color={['#39C558',
                        '#00b4ff',
                        '#ff3e43',
                        '#937fc7',
                        '#FFBE41']}
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={30}>
          <Col span={12}>
            <Card title="覆盖人次性别统计">
              <PieMap 
                search={ this.state.search }
                url="/visualization/register/getGenderStat"
                setClass="sex"
                headTitle="性别"
                color={['#39C558',
                        '#00b4ff',
                        '#FFBE41',
                        '#ff3e43',
                        '#937fc7',
                        '#ff8153',
                        '#4acab4']}
              />
            </Card>
          </Col>
          <Col span={12}>
            <Card title="覆盖人次民族统计">
              <PieMap 
                search={ this.state.search }
                url="/visualization/register/getNationStat"
                setClass="mz"
                headTitle="民族"
                color={['#937fc7',
                        '#ff3e43',
                        '#FFBE41',
                        '#00b4ff',
                        '#39C558',
                        '#ff8153',
                        '#4acab4']}
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={30}>
          <Col span={24}>
            <Card title="受益年龄统计">
              <HorizontalBarMap 
                search={ this.state.search }
                url="/visualization/register/getBenefitAgeStat"
                setClass="nlqj"
                headTitle="年龄区间"
                color={['#27c24c',
                        '#ff3e43',
                        '#FFBE41',
                        '#00b4ff',
                        '#39C558']}
              />
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    common: state.common
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({  }, dispatch)
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(ModuleName)
